<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body> 
<!--
 vue 的生命周期，总得来说就是实例的创建和销毁这段时间的一个机制吧。
created 与 mounted 的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

computed 与 watched 的区别
computed 是计算属性，也可以理解为一个方法。其中计算的结果如果不发生改变就不会触发，且必须返回一个值并在DOM中绑定的才能取得值。他可以自动获取数据的改变。
watched 属性是手动定义的所需监听的值，不同的数据可以在其中多次定义监听值，这时会消耗一定性能，他并不能像computed那样自动改变

-->


		<div id="box">
			{{msg}}网址 {{msg}}的网络协议是：{{msg2}}
		</div>
			<script type="text/javascript">
				new Vue({
					el:"#box",
					data:{
						msg:"https://www.baidu.com"
					},
					computed:{
						msg2:function(){
							var s=this.msg.split(":")[0];
							console.log("444");
							return s;
						}
					}
				})
		</script>
	</body>